<template>
	<view class="p-4">
		<!-- 商品封面 -->
		<view class="mb-4 rounded-lg overflow-hidden">
			<u-image :src="product.cover" mode="widthFix" width="100%" height="auto"></u-image>
		</view>

		<!-- 商品基本信息 -->
		<view>
			<view class="flex items-center justify-between mb-2">
				<view class="text-lg font-bold">{{ product.name }}</view>
				<view>
					<button open-type="share" class="share">
						<uv-icon name="share" color="#2979ff" size="22"></uv-icon>
					</button>
				</view>
			</view>
			<!-- 添加价格显示 -->
			<view class="text-lg font-bold text-red-600 mb-2">¥{{ product.price }}</view>
			<view class="text-sm text-gray-600 leading-relaxed mb-4">{{ product.desc }}</view>

			<!-- 标签集 -->
			<view class="flex flex-wrap gap-2" v-if="product.tags && product.tags.length">
				<view
					v-for="(tag, index) in product.tags"
					:key="index"
					class="px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
					{{ tag }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ProductDetail',
	data() {
		return {
			product: {
				id: '',
				name: '',
				cover: '',
				desc: '暂无描述',
				tags: [],
				price: 0 // 添加价格字段
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.loadProductDetail(options.id)
		}
	},
	methods: {
		loadProductDetail(id) {
			this.$api
				.xcxPost('/goods/product/detail', { id })
				.then((res) => {
					const { id, name, cover, desc, _tags, price } = res.data.product
					this.product = {
						id,
						name,
						cover: cover,
						desc: desc || '暂无描述',
						tags: _tags,
						price // 添加价格值
					}
				})
				.catch((err) => {
					console.error('获取商品详情失败:', err)
					uni.showToast({
						title: '获取商品详情失败',
						icon: 'none'
					})
				})
		}
	},
	// 右上角菜单分享配置
	onShareAppMessage() {
		return {
			title: this.product.name || '商品分享',
			path: `/pages/product/Detail?id=${this.product.id}`,
			imageUrl: this.product.cover || this.$api.noImg()
		}
	}
}
</script>
